<template>
  <div class="mpage mine">
    <van-nav-bar title="我的蔚蓝" fixed>
      <template #right>
        <van-icon name="setting-o" @click="gotopage('myinfo')"/>
      </template>
    </van-nav-bar>

    <div class="topbar">
      <div v-if="userInfo" class="login-after">
        <div class="avatar" @click="gotopage('myinfo')">
            <img
                src="http://static.welan.com//upload/mall/user/userPhoto/2015-5-5/e82b7c077a7b75851db5954e4cf79134.jpg"
                height="100%"
                width="100%"
                alt=""
            />
        </div>
        <div class="ppp">
            <p class="text-lg">蔚蓝_{{ userInfo.username }}</p>
            <p class="text-sm">余额 0.00 礼品卡 0 积分 0</p>
        </div>
      </div>

      <div v-else @click="gotopage('login')">
        <p class="dlzc">
            <span>登录/注册</span>
        </p>
      </div>

    </div>

    <div class="ccc">
      <div class="order">
        <van-cell-group>
          <van-cell
            title="我的订单"
            value="查看全部订单"
            icon="coupon"
            is-link
          />
        </van-cell-group>

        <ul class="my-order-tab">
            <li>
                <van-icon name="balance-list-o" />
                <p>待付款</p>
            </li>
            <li>
                <van-icon name="logistics" />
                <p>待收货</p>
            </li>
            <li>
                <van-icon name="exchange" />
                <p>退换货</p>
            </li>
        </ul>


      </div>
      <div class="my-type">
        <div class="my-money">
            <van-cell-group>
              <van-cell title="我的余额" value="" icon="gold-coin" is-link />
              <van-cell title="我的收藏" :to="{ name: 'collect' }" value="" icon="star" is-link />
              <van-cell title="我的点赞" :to="{ name: 'praise' }" icon="good-job" is-link />
              <van-cell title="我的礼品卡" value="" icon="point-gift" is-link />
              <van-cell title="我的优惠券" icon="vip-card" is-link />
              <van-cell
                  title="收货地址"
                  :to="{ name: 'address' }"
                  icon="location-o"
                  is-link
              />
            </van-cell-group>
        </div>
      </div>
    </div>

    <Jing-list :recommendList="recommendList"></Jing-list>
  </div>
  
</template>

<script>
export default {
    
}
</script>

<style lang="scss">
.van-cell__title {
  margin-left: 10px;
}

.van-icon-balance-list-o {
    font-size: 27px;
    margin-bottom: 5px;
}

.van-icon-logistics {
    font-size: 27px;
    margin-bottom: 5px;
}

.van-icon-exchange {
    font-size: 20px;
    margin-bottom: 5px;
    border: 1px solid;
    padding: 3px;
    border-radius: 50%;
}

.van-icon-coupon {
  color: deepskyblue;
  font-size: 27px;
}

.van-icon-gold-coin {
  color: orange;
  font-size: 27px;
}

.van-icon-star {
  color: gold;
  font-size: 27px;
}

.van-icon-good-job {
  color: tomato;
  font-size: 27px;
}

// .van-icon-todo-list {
//   color: tomato;
//   font-size: 27px;
// }

.van-icon-point-gift {
  color: #eead0e;
  font-size: 27px;
}

.van-icon-vip-card {
  color: #ff7f24;
  font-size: 27px;
}

.van-icon-location-o {
  color: rgb(253, 190, 71);
  font-size: 27px;
  font-weight: bold;
}

.main {
  padding-top: 0;
}

.van-nav-bar .van-icon-setting-o {
  color: #1989fa;
}

.mine {
  .topbar {
    padding: 4.267vw 2.667vw;
    position: relative;
    display: flex;
    height: 34.4vw;
    background-size: cover;
    .login-after {
      display: flex;
      .avatar {
        height: 21.333vw;
        width: 21.333vw;
        border-radius: 3.2vw;
        overflow: hidden;
      }
      .ppp {
        color: #fff;
        margin-left: 3.733vw;
        .text-lg {
          font-size: 4.267vw;
        }
        .text-sm {
          line-height: 40px;
        }
      }
    }
  }

.dlzc {
    background-color: transparent;
    font-size: 4.8vw;
    color: white;
    border: 1px solid white;
    padding: 0 4.8vw;
    line-height: 9.067vw;
    height: 9.067vw;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    top: 50%;   
    transform: translate(-50%, -50%); 
}


  .topbar:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    filter: blur(2.133vw);
    background-image: url(https://m.welan.com/static/img/user-bg.46291313.jpg);
    z-index: -1;
  }

  .ccc {
      .order {
        margin-top: -3.733vw;
        border-radius: 3.2vw 3.2vw 0 0;
        overflow: hidden;
        margin-bottom: 2.667vw;
        .my-order-tab {
            width: 100%;
            margin: 0 auto;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            text-align: center;
            font-size: 13px;
            color: #797d82;
            padding: 0;
            height: 79px;
            background: #fff;
            margin-bottom: 10px;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            li {
                position: relative;
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
                list-style: none;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                img {
                    width:26px;
                    height:26px;
                }
            }
        }
    }
    .my-type {
        padding-top: 10px;
        background-color: rgb(248, 246, 246);
        // .my-money {
        //     margin-top: ;
        // }
    }
  }
}

</style>